<template>
    <NuxtLayout name="default">
        <div class="flex flex-1 gap-4 overflow-hidden">
            <div class="flex flex-col shrink-0 w-[360px] bg-body rounded-lg border border-br-lighter">
                <div class="m-3">
                    <editor-option type="luma" />
                </div>

                <el-scrollbar>
                    <div class="p-4 flex flex-col gap-4 relative">
                        <!-- 开始图片 -->
                        <editor-upload
                            v-model="formData.image_url"
                            type="image"
                            title="参考图片"
                            tips="关键帧开始图片"
                        />

                        <!-- 结束图片 -->
                        <editor-upload
                            v-model="formData.other_params.image_end_url"
                            type="image"
                            title="尾帧图片"
                            tips="关键帧结束图片"
                        />

                        <!-- 视频描述 -->
                        <editor-prompt v-model="formData.prompt" />

                        <!-- 视频宽高比 -->
                        <luma-size v-model="formData.scale" />

                        <!-- 扩展提示词 -->
                        <luma-switch
                            v-model="formData.other_params.expand_prompt"
                            title="扩展提示词"
                        />

                        <!-- 循环首尾呼应 -->
                        <luma-switch
                            v-model="formData.other_params.loop"
                            title="循环首尾呼应"
                        />
                    </div>
                </el-scrollbar>

                <div class="m-3 mt-0">
                    <create-button />
                </div>
            </div>

            <RevealResult />
        </div>
    </NuxtLayout>
</template>

<script setup lang="ts">
import CreateButton from './_components/create-button.vue'
import EditorOption from './_components/editor-option.vue'
import EditorUpload from './_components/editor-upload.vue'
import EditorPrompt from './_components/editor-prompt.vue'
import LumaSwitch from './_components/luma/luma-switch.vue'
import LumaSize from './_components/luma/luma-size.vue'
import RevealResult from './_reveal/index.vue'
import { formData, getVideoConfig, resetFormData } from './hooks/useVideoEffect'

onMounted(async () => {
    await resetFormData({
        // 视频通道
        engine: 'luma',
        // 视频描述
        prompt: '',
        // 缩放比例
        scale: '1:1',
        // 参考图片
        image_url: '',
        // 其它参数
        other_params: {
            // 结束图片
            image_end_url: '',
            // 扩展提示词
            expand_prompt: false,
            // 首尾循环
            loop: false
        }
    })
    await getVideoConfig()
})
</script>
